<template>
	<div class="">

		<div class="zzc" v-if="showzzc" @click="close"></div>

		<div class="container">
			<div class="title">我的知识库</div>

			<div class="search_box">
				<input type="text" autocomplete="off" v-model="word" class="form-control search_inp"
					placeholder="这里输入关键词">

				<div class="select_box">
					<div class="form-control" id="select" @click="options_show=!options_show;showzzc=!showzzc">
						<div :style="typename=='选择状态'?'color: #999;':''">{{typename}} </div>
						<img src="../../assets/images/down.png" alt="">
					</div>
					<div class="options" v-if="options_show">
						<div class="option" style="color: #999;">选择状态</div>
						<div class="option" @click="selectit('all')">全部</div>
						<div class="option" @click="selectit(index)" v-for="item,index in types">{{item.name}}</div>
					</div>
				</div>


				<div class="sea_btn sear_btns" @click="page=1;naes=word;getlist()">
					<img src="@assets/images/search.png" alt="">
					查询
				</div>
				<div class="add_btn sear_btns" @click="openalert('add')" v-if="$permissions.indexOf(57)  != -1">
					<img src="@assets/images/add.png" alt="">
					新增
				</div>
				<div class="del_btn sear_btns" @click="delopen" v-if="$permissions.indexOf(59)  != -1">
					<img src="@assets/images/del.png" alt="">
					删除
				</div>
			</div>
			<div class="table-responsive mt-20">
				<h2 class="tcent" v-if="list.length ==0">暂时没有数据</h2>
				<table class="table table-hover" v-else>
					<tr>
						<th style="width: 50px;">
							<input type="checkbox" @change="changeall" v-model="choseall" name="all" id="a"><label
								for="a"></label>
						</th>
						<th>故障描述</th>
						<th>知识分类</th>
						<th>贡献时间</th>
						<th style="width: 12%;text-align: center;">浏览量</th>
						<th style="width: 12%;text-align: center;">状态</th>
						<th class="tcent">操作</th>
					</tr>

					<tr v-for="item,index in list">
						<td style="width: 50px;">
							<input type="checkbox" v-model="item.chosesf" @change="chosechange" name="chose"
								:id="item.id"><label :for="item.id"></label>
						</td>
						<td style="width: 30%;color: #4286F5;">{{item.faultDescription}}</td>
						<td style="width: 12%;">{{item.faultType}}</td>
						<td style="width: 12%;">{{item.createDate}}</td>
						<td style="width: 12%;text-align: center;">{{item.browse}}</td>
						<td style="width: 12%;text-align: center;">
							<div v-if="item.stateStr == '已创建'" style="color: #32B16C;">{{item.stateStr}}</div>
							<div v-if="item.stateStr == '待审核'" style="color: #EC6941;">{{item.stateStr}}</div>
							<div v-if="item.stateStr == '已审核'" style="color: #000000;">{{item.stateStr}}</div>
							<div v-if="item.stateStr == '未通过'" style="color: red;">{{item.stateStr}}</div>
						</td>

						<td>
							<div class="tcent" style="display: flex;justify-content: center;">
								<div class="check" @click="goinfo(item.id)">查看</div>
								<div class="edit"
									v-if="(item.stateStr == '已创建' || item.stateStr == '未通过') && $permissions.indexOf(109)  != -1"
									@click="openalert('edit',index)">编辑</div>
								<div class="audit" v-if="item.stateStr == '已创建'" @click="audit(index)">送审核</div>
								<div class="del"
									v-if="(item.stateStr == '已创建' || item.stateStr == '未通过') && $permissions.indexOf(59)  != -1"
									style="margin-left: 9px;" @click="ids=item.id;delnum=1;delalert=true">删除</div>
							</div>

						</td>
					</tr>


				</table>

				<div class="page_box">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="page" :page-sizes="[10, 30, 60, 100]" :page-size="limit"
						layout="total, sizes, prev, pager, next, jumper" :total="inglen">
					</el-pagination>
				</div>

			</div>

		</div>

		<div class="alzzc" v-if="delalert">
			<div class="del_alert">
				<div class="modal-header tit" style="text-align: left;">
					<em></em>信息
					<div class="right" @click="delalert=false">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"
							style="line-height: normal;"><span class="iconfont icon-cha" aria-hidden="true"></span>
						</button>
					</div>
				</div>
				<div class="alert_info">确认要删除选中的<span>{{delnum}}</span>条数据吗？</div>
				<div class="alert_btns">
					<div class="alert_sure" @click="del">确认</div>
					<div class="alert_close" @click="delalert=false">取消</div>
				</div>
			</div>
		</div>
		<!--知识库详情-->
		<div :class="showinfo?'modal in fade':'modal fade'" tabindex="-1" role="dialog"
			:style="showinfo?'display: block;z-index:199':''" id="add">
			<div class="cent" style="">
				<div class="modal-dialog modal-lg" role="document" style="margin: 0;">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em>知识库
							<div class="right" @click="showinfo=false;comment=''">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										class="iconfont icon-cha" aria-hidden="true"></span>
								</button>
							</div>
						</div>
						<div class="alert_main_info">
							<div class="info_title">{{info_obj.faultDescription}}</div>
							<div class="li_bto">
								<span>{{info_obj.createDate}}</span>
								<span>{{info_obj.createName}}</span>
								<span>引用次数：{{info_obj.quote}}</span>
								<span>评论次数：{{info_obj.comment}}</span>
								<span>浏览量：{{info_obj.browse}}</span>
								<span>分类：{{info_obj.faultType}}</span>
							</div>
							<div class="info_symptom">症状：{{info_obj.symptom}}</div>
							<div class="info_deail" v-html="info_obj.solveMethod"></div>
							<div class="info_fu_title">附件</div>
							<div class="papers" v-if="info_obj.enclosure" v-for="item,index in info_obj.enclosure">
								<div @click="check_file($url+item)"><img src="../../assets/images/upload.png" alt="">
									{{item}}
									<img src="blob:http://localhost/425ffe63-91d8-4dc6-8c97-5c87828974c2" alt="">
								</div>
								<div class="download" @click="file_down(index)">下载</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<!--选择工程师弹窗-->
		<div :class="alert_enger?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
			:style="alert_enger?'display: flex;align-items: center;z-index:200;':'z-index:200;'">
			<div class="cent w600" style="justify-content: center;width: 712px !important;height:600px;">
				<div class="modal-dialog" role="document" style="width: 100%;">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em>工程师选择
							<div class="right" @click="alert_enger=false;info.examineId='';enrname=''">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"
									style="line-height: normal;"><span class="iconfont icon-cha"
										aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100 search-cont" style="padding: 15px 27px;height: 450px;">
							<div class="chosed" v-if="enrname==''">暂未选择工程师</div>
							<div class="chosed" v-else>已选择：{{enrname}}</div>

							<!-- <div class="al_box">
								<div class="enr_title">常用联系人 <span>设置</span></div>
								<div class="enr_list">没有常用联系人</div>
							</div> -->

							<div class="al_box" v-for="item in enrlist">
								<div class="enr_title">{{item.name}}</div>
								<div class="enr_list">
									<div class="enr_li" v-for="item2 in item.children">
										<input type="radio" name="choses" @change="changename(item2.realName)"
											:value="item2.id" v-model="info.examineId"
											:id="item2.realName+item2.id"><label :for="item2.realName+item2.id"></label>
										<label :for="item2.realName+item2.id"
											style="margin-bottom: 0;">{{item2.realName}}</label>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer tcent">
							<button class="btn btn-primary" @click="doadd(1)">送审核</button>
							<button class="btn btn-info" @click="doadd(0)">暂不送审核</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--知识分类弹窗-->
		<div :class="alert_show2?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
			:style="alert_show2?'display: block;z-index:200;':'z-index:200;'">
			<div class="cent w600" style="justify-content: center;width: 600px;">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em>知识分类
							<div class="right" @click="alert_show2=false;typesearch = '';gettypetree()">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"
									style="line-height: normal;"><span class="iconfont icon-cha"
										aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100 search-cont">
							<div class="search">
								<div class="form-group" style="display: flex;padding-right: 0;">
									<input class="form-control" autocomplete="off" @keydown.enter="gettypetree"
										placeholder="输入关键字" v-model="typesearch">

									<div style="margin-left: 10px;" class="btn btn-success" @click="gettypetree">
										<span class="iconfont icon-chaxun"
											style="line-height: 34px;vertical-align: baseline;"></span>
									</div>
								</div>
							</div>
							<div class="treelist" v-if="typesearch">
								<div v-if="typetree.length > 0">
									<div class="li" v-for="item in typetree" @click="sear_chosetype(item)">
										{{item.name}}
									</div>
								</div>
								<h2 class="tcent" v-else>搜索不到该内容</h2>
							</div>
							<div class="zTreeDemoBackground left"
								:style="typesearch==''?'display:block':'display:none'">
								<ul id="treeDemo2" class="ztree" @select="choseroom"></ul>
							</div>

						</div>
						<div class="modal-footer tcent">
							<button class="btn btn-primary"
								@click="alert_show2=false;typesearch = '';gettypetree()">确定</button>
							<button class="btn btn-info"
								@click="alert_show2=false;typesearch = '';gettypetree()">关闭</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--故障原因弹窗-->
		<div :class="alert_show3?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
			:style="alert_show3?'display: block;z-index:200;':'z-index:200;'">
			<div class="cent w600" style="justify-content: center;width: 600px;">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em>故障原因
							<div class="right" @click="alert_show3=false;coursesearch='';getcoursetree()">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"
									style="line-height: normal;"><span class="iconfont icon-cha"
										aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100 search-cont">
							<div class="search">
								<div class="form-group" style="display: flex;padding-right: 0;">
									<input autocomplete="off" class="form-control" @keydown.enter="getcoursetree"
										placeholder="输入关键字" v-model="coursesearch">

									<div style="margin-left: 10px;" class="btn btn-success" @click="getcoursetree">
										<span class="iconfont icon-chaxun"
											style="line-height: 34px;vertical-align: baseline;"></span>
									</div>
								</div>

							</div>
							<div class="treelist" v-if="coursesearch">
								<div v-if="coursetree.length > 0">
									<div class="li" v-for="item in coursetree" @click="sear_chosecourse(item)">
										{{item.name}}
									</div>
								</div>
								<h2 class="tcent" v-else>搜索不到该内容</h2>
							</div>
							<div class="zTreeDemoBackground left"
								:style="coursesearch == ''?'display:block':'display:none'">
								<ul id="treeDemo3" class="ztree" @select="choseroom2"></ul>
							</div>
						</div>
						<div class="modal-footer tcent">
							<button class="btn btn-primary"
								@click="alert_show3=false;coursesearch='';getcoursetree()">确定</button>
							<button class="btn btn-info"
								@click="alert_show3=false;coursesearch='';getcoursetree()">关闭</button>
						</div>
					</div>
				</div>
			</div>
		</div>


		<!--知识库-->
		<div :class="alert_show?'modal in fade':'modal fade'" tabindex="-1" role="dialog"
			:style="alert_show?'display: block;z-index:199':''" id="add">
			<div class="cent" style="">
				<div class="modal-dialog modal-lg" role="document" style="margin: 0;">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em>知识库
							<div class="right" @click="closeadd">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										class="iconfont icon-cha" aria-hidden="true"></span>
								</button>
							</div>
						</div>
						<div class="modal-body h100">
							<div class="alert_main">
								<div class="form-group pl-160">
									<label style="width: 80px;"><em class="red">*</em>问题描述：</label>
									<div class="input-cont">
										<input type="text" autocomplete="off" class="form-control"
											v-model="info.faultDescription" placeholder="请填写描述">
									</div>
								</div>
								<div class="row">
									<div class="col-sm-6">
										<div class="form-group pl-160">
											<label style="width: 80px;"><em class="red">*</em>知识分类：</label>
											<div class="input-cont">
												<el-autocomplete class="inline-input" v-model="faultTypename"
													value-key="name" :fetch-suggestions="querySearch"
													placeholder="支持五笔、拼音、名字搜索，右侧按钮选择" @select="handleSelect">
												</el-autocomplete>
												<span class="iconfont icon-list"
													@click="alert_show2=!alert_show2"></span>
											</div>
										</div>
									</div>
									<div class="col-sm-6">
										<div class="form-group pl-160">
											<label style="width: 80px;">故障原因：</label>
											<div class="input-cont">
												<el-autocomplete class="inline-input" v-model="faultCausename"
													value-key="name" :fetch-suggestions="querySearch2"
													placeholder="支持五笔、拼音、名字搜索，右侧按钮选择" @select="handleSelect2">
												</el-autocomplete>
												<span class="iconfont icon-list"
													@click="alert_show3=!alert_show3"></span>
											</div>
										</div>
									</div>
								</div>
							<!-- 	<div class="row">
									<div class="col-sm-6">
										<div class="form-group pl-160">
											<label style="width: 108px;">业务部门电话：</label>
											<div class="input-cont" style="left: 25px;width: calc(100% - 25px);">
												<input type="text" autocomplete="off" class="form-control"
													v-model="info.faultDescription" placeholder="请填写业务部门电话">
											</div>
										</div>
									</div>
								</div> -->
								<div class="form-group pl-160">
									<label style="width: 80px;">症状：</label>
									<div class="input-cont">
										<textarea name="" id="" class="form-control" v-model="info.symptom"
											placeholder="这里输入问题症状，如故障发生时的具体表现" cols="30" rows="10"></textarea>
									</div>
								</div>
								<div class="form-group pl-160">
									<label style="width: 80px;">解决办法：</label>
									<div class="input-cont">
										<quill-editor v-model="info.solveMethod" ref="myQuillEditor" style="height: 500px;"
											@change="onchange($event)" :options="editorOption"></quill-editor>
										<span class="nums">{{nums}}/100000</span>
									</div>
								</div>

								<div class="form-group pl-160">
									<label style="width: 80px;">附件上传：</label>
									<div class="input-cont">
										<el-upload class="upload-demo" ref="upload" :headers="{'Authorization':token}"
											:action="$url+'/file/upload'" :show-file-list="false" :before-upload="beforeUpload"
											:data="{project:'zsk'}" :file-list="fileList" :on-success="uploadsuc"
											:multiple="true" :auto-upload="true">
											<!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
											<div class="upload_btn">
												<img src="@/assets/images/upload.png" alt="">点击上传
											</div>
										</el-upload>
										<div class="upload_list">
											<div class="up_li" v-for="item,index in files">
												<div class="file_name">
													<div class="file_name_left"><img src="@/assets/images/upload.png"
															alt="">{{item}}</div>
													<div class="file_name_right">
														<div class="file_check" @click="check_file($url+item)">查看</div>
														<div class="file_del" @click="del_file(index)">删除</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="rep_btns">
									<div class="rep_sub" @click="add_sub">
										<img src="@/assets/images/bc.png" alt="">保存
									</div>

									<div class="clo_sub" @click="closeadd">
										<img src="@/assets/images/close.png" alt="">关闭
									</div>
								</div>
							</div>


						</div>

					</div>
				</div>
			</div>
		</div>


		<div class="loading-content" v-if="showloading">
			<div class="loading-spinner">
				<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
				</svg>
			</div>
			<div class="loading-text">加载中...</div>
		</div>

	</div>
</template>

<script type="text/babel">
	var browserType=''
	import $ from 'jquery'

	  import {quillEditor, Quill} from 'vue-quill-editor'
	  

	  import '@/assets/css/size-set.css'
	  let fontSizeStyle = Quill.import('attributors/style/size')
	  fontSizeStyle.whitelist = [
	    '10px',
	    '12px',
	    '14px',
	    '16px',
	    '18px',
	    '20px',
	    '22px',
	    '24px',
	    '26px',
	    '28px',
	    '30px',
	    '32px',
	    '36px',
	    '38px',
	    '40px',
	    '45px',
	    '50px',
	    // false
	  ]
	  
	  Quill.register(fontSizeStyle, true)
	  const toolbarOptions = [
	  
	    ['bold', 'italic', 'underline', 'strike'], 
	    ['blockquote', 'code-block'], 
	    [{ size: fontSizeStyle.whitelist }], //重点是添加这个，其他的本来就有的
	    // [{ 'size': ['12', false, '16', '18', '20', '24', '28', '32', '36'] }], // 字体大小
	    [{ header: 1 }, { header: 2 }], 
	    [{ list: 'ordered' }, { list: 'bullet' }],
	    [{ script: 'sub' }, { script: 'super' }], 
	    [{ indent: '-1' }, { indent: '+1' }], 
	    [{ direction: 'rtl' }], 
	    [{ header: [1, 2, 3, 4, 5, 6, false] }],
	    [{ color: [] }, { background: [] }], 
	    [{ font: [] }], 
	     // [{ 'font': [false, 'heiti', 'songti', 'kaiti', 'lishu', 'arial', 'monospace'] }], // 字体 false默认微软雅黑，其他可删减
	    [{ align: [] }], 
	   
	    ['clean'], 
	  ]
	    
	export default {
		name: "",
		data() {
			return {
				urls:'',
				nums:0,
				editorOption: {
					placeholder:'请输入内容',
				    modules: {
						toolbar:  toolbarOptions
				    }
				},
				info:{faultDescription:"",faultTypeId:"",examineId:''},
				showadd: false,
				showzzc: false,
				showinfo:false,
				alert_enger: false,
				alert_show: false,
				alert_show2: false,
				alert_show3: false,
				typename : '选择状态',
				options_show:false,
				delalert: false,
				choseall:false,
				page: 1,
				list: [],
				inglen: 0,
				delnum: 0,
				limit: 10,
				num: 1,
				word:'',
				naes:'',
				typesearch:'',
				coursesearch:'',
				types:[{id:1,name:"已创建"},{id:2,name:"待审核"},{id:3,name:"已审核"},{id:4,name:"未通过"}],
				type:'',
				typeid:'',
				id:'',
				showloading: false,
				ids:"",
				courseId: undefined,
				fileList: [],
				enrlist: [],
				treeClickCount: 0,
				setting: {
					treeId: 'id',
					data: {
						key: {
							name: 'nodeName'
						}
					},
					callback: {
						onClick: this.choseroom
					}
				},
				zNodes: [],
				ztree_obj: {},
				
				treeClickCount3: 0,
				setting3: {
					treeId: 'id',
					data: {
						key: {
							name: 'nodeName'
						}
					},
					callback: {
						onClick: this.choseroom2
					}
				},
				zNodes3: [],
				ztree_obj3: {},
				token:"",
				faultTypename:"",
				faultCausename:"",
				files:[],
				filesid:[],
				coursetree:[],
				typetree:[],
				info_obj:{},
				comment:"",
				enrname:""
			}
		},
		// components: {},
		watch:{
			typesearch:{
					handler(newValue,oldValue){
					if(newValue == ''){
						
					}else{
						this.gettypetree();
					}
				}
			},
			coursesearch:{
					handler(newValue,oldValue){
					if(newValue == ''){
						
					}else{
						this.getcoursetree();
					}
				}
			},
		},
		created() {
			this.token = sessionStorage.getItem('token')
			this.getlist();
			this.getalltype();
			this.getallcourse();
			// this.getcoursetree();
			// this.gettypetree();
			this.getrooms();
			this.getrooms2();
			this.getenrlist();
		},

		mounted() {
			console.log(this.$route.params.title)
			if(this.$route.params.title){
				this.alert_show=true
				this.info.faultDescription = this.$route.params.title.faultDescription
				this.info.faultTypeId = this.$route.params.title.faultTypeId
				this.info.faultCauseId = this.$route.params.title.faultCauseId
				this.info.symptom = this.$route.params.title.resultEntity.causeOf
				this.info.enclosure = this.$route.params.title.enclosure?this.$route.params.title.enclosure.split(','):[]
				this.files = this.$route.params.title.enclosure?this.$route.params.title.enclosure.split(','):[]
				this.filesid = this.$route.params.title.enclosure>1?this.$route.params.title.enclosureId.split(','):this.$route.params.title.enclosure>0?[this.$route.params.title.enclosureId]:[],
				this.info.solveMethod = ''
				this.faultTypename = this.$route.params.title.faultType
				this.faultCausename = this.$route.params.title.faultCause
				
				if(this.$route.params.title.strings){
					for (var i = 0; i < this.$route.params.title.strings.length; i++) {
						this.info.solveMethod+=i+1+'.'+this.$route.params.title.strings[i]+'<br />'
						console.log(this.info.solveMethod)
					}
				}
				
			}
		},

		methods: {
			beforeUpload(e){
			
				this.showloading=true
				const fd = new FormData();
				 fd.append("file", e);
				 fd.append("project", 'zsk');
				 fd.append("secret", this.$md5(e.name + 'gd' + e.size));
				
				var that = this
				this.$http.post(this.$url + '/file/upload', fd, {
						headers: {
							'Content-Type': 'multipart/form-data; boundary=something'
						}
					})
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						if(response.data.code != 0){
							that.$Toast(response.data.msg)
							that.showloading=false
							return
						}
						that.files.push(response.data.data.relativePath)
						that.filesid.push(response.data.data.id)
						that.showloading=false
					})
					.catch(function(error) {
						console.log(error);
					});
					
				return false
				
			},
			onchange(e){
				e.quill.deleteText(100000,4)
				// if(this.nums == ''){
				// 	this.nums = 0
				// }else{
					this.nums = e.quill.getLength()-1
					var quill = this.$refs.myQuillEditor.quill
					quill.setSelection(e.quill.getLength()+1)
				// }
			},
			file_down(i){
				console.log(this.info_obj.enclosure)
				var enclosureId = this.info_obj.enclosureId.split(',')
			var that = this
				// window.open(this.$url+'/file/downloadFile?url='+this.$url+this.info_obj.enclosure[i]);
				var param = {fileId:enclosureId[i]}
				this.$http.post(this.$url + '/file/download', this.$qs.stringify(param),{responseType:"blob"})
					.then(function(response) {
						
						 const blob = new Blob([response.data]);
						      const fileName = that.info_obj.enclosure[i];
						      if ("download" in document.createElement("a")) {
						        // 非IE下载
						        const elink = document.createElement("a");
						        elink.download = fileName;
						        elink.style.display = "none";
						        elink.href = URL.createObjectURL(blob);
						        document.body.appendChild(elink);
						        elink.click();
						        URL.revokeObjectURL(elink.href); // 释放URL 对象
						        document.body.removeChild(elink);
						      } else {
						        // IE10+下载
						        navigator.msSaveBlob(blob, fileName);
						      }
						})
			},
			getenrlist() {
				var that = this
				
				this.$http.post(this.$url + '/group/listAll')
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
							that.enrlist = response.data.data
							
						})
						.catch(function(error) {
							
							that.$Toast('网络拥堵，刷新一下');
						});
			
			},
			doadd(type){
				var that = this
				// console.log(this.info)
				// return
				if(type==1 && !this.info.examineId){
					that.$Toast('请选择工程师');
					return
				}
				if(type == 0){
					this.info.examineId = ''
				}
				
				var param = {
					faultDescription:this.info.faultDescription,
					faultTypeId:this.info.faultTypeId,
					faultCauseId:this.info.faultCauseId,
					symptom:this.info.symptom,
					solveMethod:this.info.solveMethod,
					enclosure:this.info.enclosure,
					enclosureId:this.info.enclosureId,
					examineId:this.info.examineId,
					id:this.info.id
				}
				
				this.$http.post(this.$url + '/knowledge/saveOrUpdate',this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.info={faultDescription:"",faultTypeId:""}
						that.$Toast(response.data.msg);
						 that.info.examineId = ''
						 that.enrname = ''
						 that.alert_show = false
						 that.alert_enger = false
						 that.getlist()
						
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			changename(name){
				this.enrname = name
			},
			comit(){
				var param = {
					zsInfoId:this.info_obj.id,
					comment:this.comment
				}
				var that = this
				this.$http.post(this.$url + '/knowledge/comment', this.$qs.stringify(param))
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
						that.$Toast(response.data.msg);
						that.showinfo =false
						that.comment = ''
						})
						.catch(function(error) {
							
							that.$Toast('网络拥堵，刷新一下');
						});
			},
			goinfo(id){
				var param = {
					id:id
				}
				var that = this
				this.$http.post(this.$url + '/knowledge/detail', this.$qs.stringify(param))
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
						that.info_obj = response.data.data
						that.info_obj.enclosure = that.info_obj.enclosure?that.info_obj.enclosure.split(','):[]
						that.showinfo = true
						})
						.catch(function(error) {
							
							that.$Toast('网络拥堵，刷新一下');
						});
			},
			// 故障原因搜索结果点击
			sear_chosecourse(item){
				this.info.faultCauseId = item.id
				this.faultCausename = item.name
				this.coursesearch = item.name
			},
			// 知識分類搜索结果点击
			sear_chosetype(item){
				this.info.faultTypeId = item.id
				this.faultTypename = item.name
				this.typesearch = item.name
			},
			// 获取故障原因树状图搜索
			getcoursetree() {
				var that = this
				var url = encodeURI(this.$url + '/fault/cause/select?name='+this.coursesearch)
				
				this.$http.get(url)
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						 that.coursetree = response.data.data;
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
					});
			
			},
			// 获取搜索的故障分类
			gettypetree() {
				var that = this
				var url = encodeURI(this.$url + '/fault/type/select?name='+this.typesearch)
				
				this.$http.get(url)
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						 that.typetree = response.data.data;
						 that.$forceUpdate()
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
					});
			
			},
			querySearch2(queryString, cb) {
			       var restaurants = this.restaurants2;
			       var results = queryString ? restaurants.filter(this.createFilter2(queryString)) : restaurants;
			       // 调用 callback 返回建议列表的数据
			       cb(results);
			     },
			     createFilter2(queryString) {
			       return (restaurant) => {
			         return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) != -1);
			       };
			     },
			handleSelect2(item) {
				this.info.faultCauseId = item.id
			},
			// 获取所有故障原因
			getallcourse() {
				var that = this
				this.$http.get(this.$url + '/fault/cause/select?name=')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						 that.restaurants2 = response.data.data;
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
					});
			
			},
			// 获取所有故障分类
			getalltype() {
				var that = this
				this.$http.get(this.$url + '/fault/type/select?name=')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						 that.restaurants = response.data.data;
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
					});
			
			},
			 querySearch(queryString, cb) {
			        var restaurants = this.restaurants;
			        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
			        // 调用 callback 返回建议列表的数据
			        cb(results);
			      },
			      createFilter(queryString) {
			        return (restaurant) => {
			          return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) != -1);
			        };
			      },
			handleSelect(item) {
				this.info.faultTypeId = item.id
			},
			// 审核
			audit(i){
				this.info = this.list[i]
				this.alert_enger = true
			},
			closeadd(){
				var that = this
				that.info.faultTypeId=''
				// that.info.faultDescription=''
				that.info.enclosure=''
				that.info.symptom=''
				that.files=[]
				that.filesid=[]
				that.fileList=[]
				that.faultTypename=''
				that.faultCausename=''
				that.alert_show = false
				
				// this.getlist()
				console.log(this.list)
			},
			uploadsuc(file, fileList){
				 console.log(file);
				 this.files.push(file.data.relativePath)
				 this.filesid.push(file.data.id)
			},
			geted(){
				var that = this
				var url = encodeURI(that.$url + '/fault/cause/select?name='+that.faultCausename)
				
				this.$http.get(url)
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						 if(response.data.data.length == 0){
							 that.info.faultCauseId = ''
						 }else{
						 	 that.info.faultCauseId = response.data.data[0].id
						 }
						 
						 that.alert_enger = true
						
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			add_sub(){
				this.info.faultDescription = this.info.faultDescription.trim()
				if(this.info.faultDescription==''){
					this.$Toast('请填写问题描述');
					return
				}
				
				if(this.info.faultTypeId=='' || this.faultTypename == ''  || this.faultTypename ==null){
					this.$Toast('请选择知识分类');
					return
				}
				
				
				this.info.enclosure = this.files.join(',')
				this.info.enclosureId = this.filesid.join(',')
			
				if(this.faultTypename){
					var that = this
					var url = encodeURI(this.$url + '/fault/type/select?name='+this.faultTypename)
					
					this.$http.get(url)
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
							if(response.data.data.length == 0){
								that.info.faultTypeId=''
								that.$Toast('请选择知识分类');
								return
							}else{
								 that.info.faultTypeId = response.data.data[0].id
							}
							if(that.faultCausename){
								that.geted()
							}else{
								that.info.faultCauseId = ''
								that.alert_enger = true
							}
							
						})
						.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
						});
				}else{
					that.geted()
				}
	
			console.log(that.info)
			},
			// 故障原因选择
			choseroom2(data, node, treeNode) {
				this.treeClickCount++;
				if (this.treeClickCount >= 2) {
					return;
				}
				this.timer = window.setTimeout(() => {
					if (this.treeClickCount == 1) {
						this.treeClickCount = 0;
						console.log('单击事件,可在此处理对应逻辑')
						this.info.faultCauseId = treeNode.id
						this.faultCausename = treeNode.nodeName
					} else if (this.treeClickCount > 1) {
						this.treeClickCount = 0;
						this.ztree_obj3.cancelSelectedNode();
						console.log('双击事件,可在此处理对应逻辑')
					}
				}, 300);
			},
			// 故障分类选择
			choseroom(data, node, treeNode) {
				this.treeClickCount++;
				if (this.treeClickCount >= 2) {
					return;
				}
				this.timer = window.setTimeout(() => {
					if (this.treeClickCount == 1) {
						this.treeClickCount = 0;
						console.log('单击事件,可在此处理对应逻辑')
						this.info.faultTypeId = treeNode.id
						this.faultTypename = treeNode.nodeName
					} else if (this.treeClickCount > 1) {
						this.treeClickCount = 0;
						this.ztree_obj.cancelSelectedNode();
						console.log('双击事件,可在此处理对应逻辑')
					}
				}, 300);
			},
			// 获取故障原因
			getrooms2() {
				var param = {
					parentId: 0
				}
				var that = this
				this.$http.get(this.$url + '/fault/selectparentId?parentId=-1')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.zNodes3 = response.data.data
						that.ztree_obj3 = $.fn.zTree.init($("#treeDemo3"), that.setting3, that.zNodes3);
						var  nodes4 = that.ztree_obj3.getNodes();
						for  ( var  i = 0; i < nodes4.length; i++) {  //设置节点展开
						    that.ztree_obj3.expandNode(nodes4[i],  true ,  false ,  true );
						}
					})
					.catch(function(error) {
						console.log(error);
						
						that.$Toast('网络拥堵，刷新一下');
					});
			
			},
			// 获取故障分类
			getrooms() {
				var param = {
					parentId: 0
				}
				var that = this
				this.$http.get(this.$url + '/fault/type/tree?parentId=-1')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.zNodes = response.data.data
						that.ztree_obj = $.fn.zTree.init($("#treeDemo2"), that.setting, that.zNodes);
						var  nodes4 = that.ztree_obj.getNodes();
						for  ( var  i = 0; i < nodes4.length; i++) {  //设置节点展开
						    that.ztree_obj.expandNode(nodes4[i],  true ,  false ,  true );
						}
					})
					.catch(function(error) {
						console.log(error);
						
						that.$Toast('网络拥堵，刷新一下');
					});
			
			},

			check_file(url){
				 window.open(url, '_blank');
			},
			del_file(i){
				this.files.splice(i,1)
				this.filesid.splice(i,1)
				this.fileList.splice(i,1)
			},
			selectit(index){
				if(index=='all'){
					this.typename = '全部'
					this.typeid = ''
				}else{
					this.typename = this.types[index].name
					this.typeid = this.types[index].id
				}
				this.options_show=false
				this.showzzc=false
				
			},
			handleSizeChange(val) {
			       console.log(`每页 ${val} 条`);
								this.limit = val
								this.choseall = false
								this.getlist()
			     },
			     handleCurrentChange(val) {
			       console.log(`当前页: ${val}`);
								this.page = val
				this.choseall = false
								this.getlist()
			     },
			// 打开弹窗
			openalert(type,index){
				// console.log(this.list[index].enclosure)
				this.type=type
				if(index != undefined){
					this.info.faultDescription=this.list[index].faultDescription
					this.info.faultTypeId=this.list[index].faultTypeId
					this.info.faultCauseId=this.list[index].faultCauseId
					this.info.symptom=this.list[index].symptom
					this.info.solveMethod=this.list[index].solveMethod
					this.info.enclosure=this.list[index].enclosure
					this.info.id=this.list[index].id
					this.faultTypename=this.list[index].faultType
					this.faultCausename=this.list[index].faultCause
					this.fileList =  this.list[index].enclosure?this.list[index].enclosure.split(','):[]
					console.log(this.list[index].enclosureId)
					this.files =this.list[index].enclosure?this.list[index].enclosure.split(','):[]
					this.filesid = this.files.length>1?this.list[index].enclosureId.split(','):this.files.length>0?[this.list[index].enclosureId]:[]
					
				}else{
					this.info = {faultDescription:"",faultTypeId:""}
					this.files=[]
					this.filesid=[]
					this.fileList=[]
					this.faultTypename=''
					this.faultCausename=''
				}
				this.alert_show=true
			
			},
			delopen(){
				var ids=''
				var num = 0
				for (var i = 0; i < this.list.length; i++) {
					if(this.list[i].chosesf==true){
						ids = ids+''+this.list[i].id+','
						num++
					}
				}
				this.ids = ids.substring(0,ids.length-1)
				if(this.ids==''){
					this.$Toast('暂无选中');
					return
				}
				this.delnum = num
				this.delalert=true		
			},
			// 删除
			del(){
				this.delalert=false
				var param = {
					ids:this.ids
				}
				var that = this
				this.$http.post(this.$url + '/knowledge/delete', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
					that.getlist()
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			changeall(){
				if(this.choseall){
					for (var i = 0; i < this.list.length; i++) {
						this.list[i].chosesf = true
					}
				}else{
					for (var i = 0; i < this.list.length; i++) {
						this.list[i].chosesf = false
					}
				}
			},
			chosechange(){
				for (var i = 0; i < this.list.length; i++) {
					if(this.list[i].chosesf == true){
						this.choseall=true
					}else{
						this.choseall=false
						break
					}
					
				}
			},
			// 点击遮罩层
			close(){
				this.options_show=false
				this.showzzc=false
			},
			
			getlist() {
				this.showloading = true
				this.choseall = false

				var that = this
				var param = {
					page:this.page,
					limit:this.limit,
					stateId:this.typeid,
					faultDescription:this.naes,
					faultTypeId:"",
					createId:sessionStorage.getItem('uid')
				}
				
				this.$http.post(this.$url + '/knowledge/select', this.$qs.stringify(param))
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
							if(response.data.data.length == 0 && that.page != 1){
								that.getlist()
							}
							that.list = response.data.data
							for (var i = 0; i < that.list.length; i++) {
								that.list[i].chosesf = false
							}
							that.choseall = false
							that.inglen = response.data.count
							if (that.inglen > that.limit) {
								that.num = Math.ceil(that.inglen / that.limit)
							} else {
								that.num = 1
							}
							that.showloading = false
						})
						.catch(function(error) {
							
							that.$Toast('网络拥堵，刷新一下');
						});
				
			},
		},

		computed: {},
	}
</script>
<style lang='less' scoped>
	/deep/ .ql-container{
		height: 82%;
	}
	.papers {
		display: flex;
		margin-right: 10px;
	}

	.nums {
		position: absolute;
		right: 10px;
		bottom: 20px;
	}

	/deep/.ql-snow .ql-picker.ql-header .ql-picker-label::before,
	/deep/.ql-snow .ql-picker.ql-header .ql-picker-item::before {
		content: "文本" !important;
	}

	/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
	/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
		content: "标题1" !important;
	}

	/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
	/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
		content: "标题2" !important;
	}

	/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
	/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
		content: "标题3" !important;
	}

	/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
	/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
		content: "标题4" !important;
	}

	/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
	/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
		content: "标题5" !important;
	}

	/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
	/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
		content: "标题6" !important;
	}

	/deep/.ql-snow .ql-picker.ql-font .ql-picker-label::before,
	/deep/.ql-snow .ql-picker.ql-font .ql-picker-item::before {
		content: "标准字体" !important;
	}

	/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
	/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
		content: "衬线字体" !important;
	}

	/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
	/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
		content: "等宽字体" !important;
	}

	/deep/.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
		border-color: #ccc;
		max-height: 200px !important;
		overflow: auto;
	}

	.modal-header.tit {
		font-size: 20px;
		color: #000;
		font-weight: normal;
	}


	label {
		font-weight: normal;
	}

	.alert_main textarea {
		height: 56px;
		width: 100%;
	}

	.pl-160 {
		padding-left: 80px;
	}

	.alert_main {
		padding: 30px 130px;
	}

	.check,
	.edit {
		margin-right: 9px;
	}

	/deep/ .el-pagination__total {
		height: 33px !important;
		line-height: 33px !important;
	}

	/deep/ .el-input--mini .el-input__inner {
		height: 33px;
	}

	/deep/.el-pagination__editor.el-input .el-input__inner {
		height: 33px;
	}

	.page_box {
		display: flex;
		justify-content: flex-end;
		margin-top: 30px;
	}

	/deep/ .el-pagination .btn-prev {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pagination .btn-next {
		border: 1px solid #ccc;
		padding: 0;
		border-left: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pager li {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		line-height: 33px;
	}

	/deep/ .el-pager li:nth-last-of-type(1) {
		border-right: 1px solid #ccc;
	}

	/deep/ .el-pager li.active {
		border: #4286f5 1px solid;
		background: #4286f5;
		color: #fff;
	}

	.pages {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}

	.buttons {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 38px;
	}

	.closebtn {
		width: 89px;
		height: 34px;
		background: #EEEEEE;
		border-radius: 6px;
		font-size: 14px;
		color: #434343;
		text-align: center;
		line-height: 34px;
		cursor: pointer;
	}

	.sure {
		width: 89px;
		height: 34px;
		line-height: 34px;
		background: #4286F5;
		border-radius: 6px;
		font-size: 14px;
		color: #FFFFFF;
		margin-right: 18px;
		text-align: center;
		cursor: pointer;
	}

	.w600 .modal-body.h100 {
		height: 600px;
	}

	.line textarea {
		height: 75px;
	}

	.line input,
	.line textarea {
		width: 360px;
	}

	.line_title {
		font-size: 14px;
		color: #000000;
		line-height: 34px;
	}

	.line {
		display: flex;
		margin-top: 19px;
		justify-content: center;

	}

	.modal-header.tit {
		font-size: 20px;
		color: #000;
		font-weight: normal;
	}

	.w600 {
		margin: calc(50vh - 400px) auto;
	}

	.tcent {
		text-align: center;
		display: flex;
		justify-content: center;

	}

	td .tcent {
		justify-content: start;
	}

	input[type='checkbox'] {
		opacity: 0;
		position: absolute;
		z-index: -2;
	}

	input[type="checkbox"]+label {
		width: 16px;
		height: 16px;
		border: 1px solid #c8c8c8;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 0;
		box-sizing: border-box;
		margin-right: 7px;
	}

	input[type="checkbox"]+label::before {
		content: '';
		display: block;
		margin-bottom: 0;
		box-sizing: border-box;
	}

	input[type="checkbox"]:checked+label {
		border: 1px solid #0075ff;
		box-sizing: border-box;
		background: #0075ff url(../../assets/images/dui.png) no-repeat;
		background-size: 80% 80%;
		background-position-x: 20%;
		background-position-y: 20%;
	}

	input[type="checkbox"]:checked+label::before {
		background: #0075ff;
	}

	.search_inp {
		width: 275px;
		margin-bottom: 0;
	}

	.title {
		font-size: 24px;
		color: #000000;
	}


	.btns {
		width: 72px;
		padding: 0;
	}

	.zzc {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 4;
		top: 0;
		left: 0;
	}



	.biaoq {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.qx:hover {
		background: #edf3fd;
		color: #4286f5;
	}


	.down {
		background: #fff;
		position: absolute;
		top: 30px;
		right: 0;
		width: 130px;
		text-align: left;
		padding: 0 5px;
		z-index: 5;

		color: #666;
		box-shadow: 0 0 10px rgb(0 0 0 / 20%);

	}

	.li {
		border-bottom: 1px solid #f3f3f3;
		padding-left: 20px;
		height: 40px;
		line-height: 40px;
	}

	.li:nth-last-of-type(1) {
		border-bottom: none;
	}

	.more {
		position: relative;
	}

	.btns .iconfont {
		font-size: 10px;
		transition: all .3s;
		transform: rotateZ(0deg);
		line-height: 26px;
	}

	.actives {
		background: #4286f5;
		color: #fff;
	}

	td,
	th {
		font-size: 14px;
		color: #333;
		/* line-height: 22px; */
		padding: 10px;
		border-top: 0;
		border-bottom: 1px solid #eee;
	}


	.modal {
		position: absolute;
	}

	.modal-dialog {
		height: 97%;
	}

	.modal-header {
		position: sticky;
		top: 0;
		z-index: 50;
	}

	.modal-content {
		/* width: 85%; */
		margin: 0 auto;
		max-height: 100%;
		/* height: 65vh; */
		/* overflow-y: scroll; */
	}

	.cent {
		width: 100%;
		align-items: center;
	}
</style>
